<script setup>
import { ref, onMounted } from 'vue'
import { darkTheme } from 'naive-ui'
const electron = require('electron')
const { ipcRenderer } = electron
const theme = ref()
// 监听主题是否变化
ipcRenderer.on('theme:change', (e, newVal) => {
  theme.value = newVal
})

onMounted(() => {
  theme.value = window.storeApi.ipcRenderer.getStoreValue('theme')
  document.documentElement.setAttribute('data-theme', theme.value)
})
</script>
<template>
  <n-config-provider :theme="theme === 'dark' ? darkTheme : null">
    <n-message-provider>
      <n-dialog-provider>
        <div class="app">
          <!-- 定制化的头部操作栏 -->
          <CustomHeader></CustomHeader>
          <router-view></router-view>
        </div>
      </n-dialog-provider>
    </n-message-provider>
  </n-config-provider>
</template>

<style scoped lang="less">
.app {
  width: 100vw;
  height: 100vh;
  background-color: var(--background-color);
  transition: all 0.5s;
}

.app {
  display: grid;
  grid-template-rows: auto 1fr;
}
</style>
